<!DOCTYPE html>
<!--在html中添加xmlns:th="http://www.thymeleaf.org" ,可避免编辑器出现html验证错误，这不是必须的-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf使用</title>
    <script type="text/javascript" th:src="@{static/js/vue/vue-2.4.0.js}"></script>
    <script type="text/javascript" th:src="@{static/js/vue/vue-resource-1.3.4.js}"></script>
</head>
<body>

<div class="container" id="app">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">用户</label>
            <input type="text" name="username" id="username" v-model="username" />
            <input type="button" name="login" id="login" value="登录websocket" @click="loginWebsocket"/>
        </div>
        <select class="custom-select" id="inputGroupSelect01" v-model="selectVal">
            <option selected value="">选择一个...</option>
            <option v-for="obj in users">{{obj}}</option>
        </select>
    </div>
    <div class="input-group mb-3">
        <input type="text" class="form-control" id="all" v-model="allUs">
        <div class="input-group-append">
            <span class="input-group-text" id="btn1" ><button @click="sendAll">发送给所有人</button></span>
        </div>
    </div>
    <div class="input-group mb-3">
        <input type="text" class="form-control" id="single" v-model="singleMsg">
        <div class="input-group-append">
            <span class="input-group-text" id="btn2" ><button @click="single">发送给服务器</button></span>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data(){
            return {
                singleMsg : '',
                allUs : '',
                selectVal : '',
                username : '',
                users : [],
                msgObj: {
                    users: [],
                    msg: ''
                }
            }
        },
        created(){  // 页面创建生命周期函数

        },
        destroyed: function () { // 离开页面生命周期函数
            this.websocketclose();
        },
        methods:{
            loginWebsocket: function(){
                if (! this.username) {
                    console.log('请输入登录用户名!');
                    return;
                }
                this.initWebSocket();
            },
            initWebSocket: function () {
                // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
                this.websock = new WebSocket("ws://localhost:8106/websocket1/" + this.username);
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen: function () {
                console.log("WebSocket连接成功");
            },
            websocketonerror: function (e) {
                console.log("WebSocket连接发生错误");
            },
            websocketonmessage: function (e) {
                //    var da = JSON.parse(e.data);
                var da = (e.data);
                console.log("来自服务端发送消息: " + da);
                if (da) {
                    let parse = JSON.parse(da);
                    if (parse && parse.users){
                        this.users = parse.users;
                    }
                }
            },
            websocketclose: function (e) {
                console.log("connection closed (" + e.code + ")");
            },
            single(e) {
                //清空数组
                this.msgObj.users.splice(0);

                this.msgObj.users.push(this.username);
                this.msgObj['msg'] = this.singleMsg;
                this.websock.send(JSON.stringify(this.msgObj));
            },
            sendAll(){
                //清空数组
                this.msgObj.users.splice(0);
                if ( ! this.selectVal){
                    this.msgObj.users = this.msgObj.users.concat(this.users) ;
                }else {
                    this.msgObj.users.push(this.selectVal);
                }
                this.msgObj['msg'] = this.allUs;

                this.websock.send(JSON.stringify(this.msgObj));
            }
        }
    });
</script>
</html>
